import React, { useEffect, useState } from 'react'
import lhy from './lyh.gif'

// 当 Count 组件有多个的适合会相互影响
// const handleMouseMove = () => {}

export default function Count() {
  const [position, setPosition] = useState({
    x: 0,
    y: 0,
  })

  // 每次状态变化，都会重新生成一个新函数
  // const handleMouseMove = () => {}

  useEffect(() => {
    const handleMouseMove = (e) => {
      console.log(1)
      setPosition({
        x: e.clientX + 50,
        y: e.clientY + 50,
      })
    }
    document.addEventListener('mousemove', handleMouseMove)
    return () => {
      // !解绑事件
      document.removeEventListener('mousemove', handleMouseMove)
    }
  }, [])

  return (
    <div>
      <img
        src={lhy}
        style={{ position: 'absolute', top: position.y, left: position.x }}
        alt='罗永浩'
      />
    </div>
  )
}
